<template>
  <ElTreeSelect style="width: 100%" :data="data" :check-strictly="checkStrictly" v-bind="getAttrs"></ElTreeSelect>
</template>

<script setup lang="ts" name="ApiTreeSelect">
import { ElTreeSelect } from "element-plus";
import { computed, onMounted, PropType, ref, useAttrs } from "vue";
import { omit } from "lodash";
const props = defineProps({
  requestApi: {
    type: Function as PropType<(params) => Promise<Array<any>>>
  },
  params: {
    type: Object
  },
  callback: {
    type: Function as PropType<(res: Array<any>) => Array<any>>
  },
  checkStrictly: {
    type: Boolean,
    default: true
  }
});
const data = ref([]);
const attrs = useAttrs();
const getAttrs = computed(() => {
  return { ...attrs, ...omit(props, ["requestApi", "params"]) };
});
onMounted(async () => {
  data.value = await fetch();
});
const fetch = async () => {
  const res = await props.requestApi!(props.params);
  if (props.callback) {
    return props.callback(res);
  } else {
    return res;
  }
};
</script>

<style scoped></style>
